import { Collapse, Tag, List } from 'antd-mobile'
import styles from '../css/ticket.module.css'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'

function Seat() {
  const { info } = useLoaderData()
  const nav = useNavigate()
  const [sp] = useSearchParams()

  // 渲染每个折叠面板的标题
  const renderTitle = (seatType) => {
    const si = info[seatType]
    const map = {
      ssoftSeat: '二等座',
      fsoftSeat: '一等座',
      businessSeat: '商务座'
    }

    return (
      <div className={styles.cTitle}>
        <div>
          <span>{map[seatType]}</span>
          <span className={styles.price}>￥{si.price}</span>
        </div>
        <span className={styles.count}>
          <span>{si.ticketNum}</span>
          {typeof si.ticketNum === 'number' && <span>张</span>}
        </span>
      </div>
    )
  }

  // 渲染每个折叠面板右侧的小图标
  const renderIcon = (actvie) => {
    if (actvie) {
      return (
        <Tag
          className={styles.arrowIcon}
          color="#ff6430"
          fill="outline"
        >
          收起
        </Tag>
      )
    } else {
      return (
        <Tag
          className={styles.arrowIcon}
          color="#ff6430"
          fill="outline"
        >
          预订
        </Tag>
      )
    }
  }

  // 渲染每个面板下的列表
  const renderContent = (seat, price) => {
    return (
      <List style={{ '--border-top': 'none', '--border-bottom': 'none' }}>
        <List.Item
          description="含40元出行保障 快速出票 迅捷无忧"
          extra={
            <Tag
              className={styles.arrowIcon}
              color="#ff6430"
              fill="outline"
              onClick={() => gotoTicketOrder(seat, price)}
            >
              买票
            </Tag>
          }
        >
          <span className={styles.tip}>快速预订 - {seat}</span>
        </List.Item>
        <List.Item
          description="出票较慢，高峰期需要排队"
          extra={
            <Tag
              className={styles.arrowIcon}
              color="#ff6430"
              fill="outline"
              onClick={() => gotoTicketOrder(seat, price)}
            >
              买票
            </Tag>
          }
        >
          <span className={styles.tip}>普通预订 - {seat}</span>
        </List.Item>
      </List>
    )
  }

  // 点击买票按钮，跳转到订单填写页面
  const gotoTicketOrder = (seat, price) => {
    // TODO：导航跳转之前，需要先准备好3个查询参数，携带到订单填写页
    // 1. 发车的日期 date
    const date = sp.get('date')
    // console.log(date)
    // 2. 车票的类别 几等座
    // console.log(seat)
    // 3. 车票的单价 price
    // console.log(price)
    nav(`/ticket-order?date=${date}&seat=${seat}&price=${price}`, {
      state: info // info 是车票详情的数据
    })
  }

  return (
    <div>
      <Collapse accordion>
        <Collapse.Panel
          key="1"
          title={renderTitle('ssoftSeat')}
          arrowIcon={renderIcon}
        >
          {renderContent('二等座', info.ssoftSeat.price)}
        </Collapse.Panel>

        <Collapse.Panel
          key="2"
          title={renderTitle('fsoftSeat')}
          arrowIcon={renderIcon}
        >
          {renderContent('一等座', info.fsoftSeat.price)}
        </Collapse.Panel>

        <Collapse.Panel
          key="3"
          title={renderTitle('businessSeat')}
          arrowIcon={renderIcon}
        >
          {renderContent('商务座', info.businessSeat.price)}
        </Collapse.Panel>
      </Collapse>
    </div>
  )
}

export default Seat
